<template>
  <div>
    <!-- 搜索历史 -->
    <van-cell title="搜索历史">
      <!-- 点击删除图标让，文字显示 -->
      <van-icon @click="isDel=true" name="delete-o" v-if="!isDel" />
      <template v-else>
        <span @click="history.splice(0)">全部删除</span>
        <!-- 点击让文字隐藏 -->
        <span @click="isDel=false" style="margin-left:10px">完成</span>
      </template>

    </van-cell>
    <!-- 搜索记录 -->
    <van-cell @click="clickHistory(index,item)" :title="item" v-for="(item,index) in history" :key="item">
      <van-icon name="close" v-if="isDel" />
    </van-cell>
    <van-empty v-if="!history.length" image="error" description="暂无搜索历史" />
  </div>
</template>

<script>
export default {
  data () {
    return {
      // 是否显示
      isDel: false
    }
  },
  props: {
    history: {
      type: Array,
      required: true
    }
  },
  methods: {
    // 点击搜索历史
    clickHistory (index, item) {
      if (this.isDel) {
        // 删除
        this.history.splice(index, 1)
      } else {
        // 传值
        this.$emit('search', item)
      }
    }
  }
}
</script>

<style>
</style>
